//幻灯片
define(['jquery', 'loadcss'], function($, loadcss) {
    loadcss('../src/propments/css/swipe.css', document.body);

    function swipe(el) {
        var swipe = {
            option: {
                width: '0',
                height: '0',
                dot: 'rgba(255,255,255,.6)',
                curr_dot: '#c82519',
                wait_time: 2000, //切换间隔
                duration: 500, //动画时长
                auto_swipe: true, //自动切换
                curr_swipe: 0, //当前幻灯片索引值
                swipe_num: 0, //幻灯片数量
                //show_navigator: false, //是否显示左右导航箭头
            },
            obj: {},

            touch_option: {
                direction: 'no', // left  right  up  down
                start_x: 0, //开始的X坐标
                start_y: 0, //开始的X坐标
                end_x: 0, //结束的X坐标
                end_y: 0, //结束的X坐标
                x_length: 0, //横向移动距离
                y_length: 0, //纵向移动距离
            },


            //开始执行
            run: function(obj) {
                this.obj = $(el); //获取幻灯片实例
                this.option.swipe_num = this.obj.find("ul > li").length;
                //参数处理
                if (obj !== undefined) {
                    this.option = Object.assign(this.option, obj); //合并参数

                    if (obj.width === undefined) {
                        this.option.width = this.obj.width(); //设置宽
                    }
                    if (obj.height === undefined) {
                        console.log(this.obj)
                        this.option.height = this.obj.height(); //设置高
                    }
                } else {
                    this.getSwipeBoxWidthHeight(); //获取幻灯片盒子的宽、高
                }
                //添加点
                this.initDom();

                //监听touch 事件
                this.setTouch(); //监听幻灯片触屏事件

                //设置幻灯片的样式，如宽、高
                //console.log(this.option);
                $(this.obj).css({ width: this.option.width + 'px', height: this.option.height + 'px' });

                //设置 ul 宽度
                this.setUlWidth();
                //执行动画
                this.goSwipe();

            },

            //设置幻灯片宽、高
            getSwipeBoxWidthHeight: function() {
                //console.log(this.option);
                //return;
                this.option.width = this.obj.width();
                this.option.height = this.obj.height();
            },
            //设置幻灯片宽度
            setUlWidth: function() {
                var ul_width = this.option.swipe_num * this.option.width; //ul 宽度
                //console.log(ul_width);
                this.obj.find('ul > li').css('width', this.option.width + 'px');
                this.obj.find('ul').css('width', ul_width + 'px');
            },
            //执行切换
            goSwipe: function() {
                if (this.option.auto_swipe) {
                    var that = this;
                    setInterval(function() {
                        that.moveSwipe();
                    }, this.option.wait_time)
                }
            },
            //移动幻灯片
            moveSwipe: function() {
                //计算移动距离
                var num = (this.option.curr_swipe + 1) * this.option.width;
                if (this.option.curr_swipe == this.option.swipe_num - 1) {
                    num = 0;
                }
                //判断是否为最后一张幻灯片
                if (this.option.curr_swipe == this.option.swipe_num - 1) {
                    this.option.curr_swipe = 0;
                } else {
                    this.option.curr_swipe++;
                }

                this.obj.find("ul").animate({ left: '-' + num + 'px' });

                //console.log(this.option.curr_swipe); //切换完了
                //切换小圆点
                this.changeDot();

            },
            //初始化幻灯片初始状态
            initDom: function() {
                //纠正当前幻灯片索引值
                if (this.option.curr_swipe >= this.option.swipe_num) {
                    this.option.curr_swipe = this.option.swipe_num - 1;
                }
                //添加点
                var html;
                html = '<div class="dot-box">';
                for (i = 0; i < this.option.swipe_num; i++) {
                    if (i == this.option.curr_swipe) {
                        html += '<span class="active"></span>';
                    } else {
                        html += '<span></span>';
                    }
                }
                html += '</div>'
                this.obj.append(html);

                //设置点的样式
                this.obj.find(".dot-box > span").css({ "background-color": this.option.dot });
                this.obj.find(".dot-box > .active").css({ "background-color": this.option.curr_dot });

                //初始化幻灯片
                var left_value = this.option.width * this.option.curr_swipe
                    //console.log(left_value);
                this.obj.find("ul").css("left", '-' + left_value + 'px');
            },


            //监听幻灯片触屏事件
            setTouch: function() {
                var that = this;
                //监听开始触摸屏幕时的事件
                this.obj.on('touchstart', function(event) {
                    //重新初始化
                    that.touch_option = {
                        direction: 'no', // left  right  up  down
                        start_x: 0, //开始的X坐标
                        start_y: 0, //开始的X坐标
                        end_x: 0, //结束的X坐标
                        end_y: 0, //结束的X坐标
                        x_length: 0, //横向移动距离
                        y_length: 0, //纵向移动距离
                    };
                    var tmp = event.originalEvent.targetTouches[0]; //事件坐标
                    that.touch_option.start_x = tmp.pageX; //取得开始 x 坐标
                    that.touch_option.start_y = tmp.pageY; //取得开始 y 坐标
                    //console.log(that.touch_option);
                });
                //监听移动触摸屏幕时的事件
                this.obj.on('touchmove', function(event) {
                    //console.log(event);
                });
                //监听移动触摸屏幕时的事件
                this.obj.on('touchend', function(event) {
                    var tmp = event.originalEvent.changedTouches[0]; //事件坐标
                    that.touch_option.end_x = tmp.pageX; //取得结束 x 坐标
                    that.touch_option.end_y = tmp.pageY; //取得结束 y 坐标

                    //判断移动距离,
                    that.touch_option.x_length = Math.abs(that.touch_option.end_x - that.touch_option.start_x); //横向移动距离
                    that.touch_option.y_length = Math.abs(that.touch_option.end_y - that.touch_option.start_y); //纵向移动距离

                    //判断移动方向
                    if (that.touch_option.x_length - that.touch_option.y_length > 0) {
                        //左右移动
                        if (that.touch_option.x_length - that.touch_option.y_length == 0) {
                            //没有移动就啥不干
                            return;
                        }
                        if (that.touch_option.start_x - that.touch_option.end_x > 0) {
                            that.touch_option.direction = 'left'; //向左划屏
                        } else {
                            that.touch_option.direction = 'right'; //向右划屏
                        }
                    } else {
                        //上下移动
                        if (that.touch_option.start_y - that.touch_option.end_y == 0) {
                            //没有移动就啥不干
                            return;
                        }
                        if (that.touch_option.start_y - that.touch_option.end_y > 0) {
                            that.touch_option.direction = 'up'; //向上划屏
                        } else {
                            that.touch_option.direction = 'down'; //向下划屏
                        }
                    }
                    //console.log(that.touch_option.direction);
                    that.manualMove(); //移动幻灯片
                });
            },

            manualMove: function() {
                var direction = this.touch_option.direction; //获取方向
                if (direction == 'left' || direction == 'right') {
                    if (direction == 'left') {
                        //移到下一张幻灯片
                        if (this.option.curr_swipe == this.option.swipe_num - 1) return; //没有下一张，就不啥都不干
                        var num = (this.option.curr_swipe + 1) * this.option.width; //计算移动距离
                        this.obj.find("ul").animate({ left: '-' + num + 'px' }); //移动动画
                    } else {
                        //移到上一张幻灯片
                        if (this.option.curr_swipe == 0) return; //没有上一张，就不啥都不干
                        var num = (this.option.curr_swipe - 1) * this.option.width; //计算移动距离
                        this.obj.find("ul").animate({ left: '-' + num + 'px' }); //移动动画
                    }
                    //判断是否为最后一张幻灯片
                    if (this.option.curr_swipe == this.option.swipe_num - 1) {
                        this.option.curr_swipe = 0;
                    } else {
                        this.option.curr_swipe++;
                    }
                    //切换小圆点
                    this.changeDot();
                }
            },

            //切换点
            changeDot: function() {
                this.obj.find(".dot-box span").css("background-color", this.option.dot);
                this.obj.find(".dot-box span").eq(this.option.curr_swipe).css("background-color", this.option.curr_dot);
            }
        }
        return swipe;
    }


    return {
        swipe: swipe,
    }
});